<template>
	<view>
		<div>
			<uv-search @blur="changeSearch" inputAlign="center" height="60rpx" v-model="searchQuery"
				@input="handleInput">
			</uv-search>
			<div v-if="history.length" class="history-container">
				<h1 class="data-text">历史记录</h1>
				<view class="History-text">
					<view class="History" v-for="(item, index) in history" :key="index" @click="selectHistory(item)">
						{{ item }}
					</view>
				</view>
			</div>
			<div v-if="filteredData.length" class="data-list">

				<view>
					<view @click="goToDetail" class="search-Box" v-for="(item, index) in filteredData" :key="index">

						{{ item.texts }}
					</view>
				</view>
			</div>
			<div v-else>
				<uv-empty mode="history" icon="https://cdn.uviewui.com/uview/empty/car.png"></uv-empty>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchQuery: '',
				history: [], // 搜索历史记录
				dataList: [], // 示例数据列表
				filteredData: [], // 过滤后的数据列表
				list: []
			}
		},
		onLoad() {
			this.dataList = uni.getStorageSync("searchdatas") || []; // 确保有默认值  
			console.log(this.dataList);
			this.filteredData = this.dataList; // 初始化时显示全部数据  
			this.loadHistory(); // 加载历史记录  

		},
		methods: {
			goToDetail() {
				uni.navigateTo({
					url: "/pages/EmergencyDepartment/EmergencyDepartment"
				})
			},
			getSearchData() {
				uni.request({
					url: "http://172.27.6.151:32112/api/get/search",
					method: "GET"
				}).then(res => {
					console.log(res);
				})
			},

			handleInput() {
				// 实时更新搜索框的内容
				this.filterData();
			},
			changeSearch() {
				if (this.searchQuery && !this.history.includes(this.searchQuery)) {
					this.history.push(this.searchQuery);
				}
				// 执行搜索操作
				this.filterData();
				console.log('Searching for:', this.searchQuery);
			},
			selectHistory(item) {
				this.searchQuery = item;
				this.changeSearch(); // 执行选中的历史记录的搜索操作
			},
			loadHistory() {
				let history = uni.getStorageSync("searchHistory") || [];
				this.history = history.filter(item => item.trim() !== ''); // 清理空字符串  
				if (this.history.length && !this.history.includes(this.searchQuery.trim())) {
					// 如果当前查询不是历史记录的一部分，且历史记录不为空，则添加它  
					this.history.unshift(this.searchQuery.trim()); // 假设我们将当前查询添加到历史记录的开始  
					uni.setStorageSync("searchHistory", this.history); // 保存更新后的历史记录  
				}
			},
			filterData() {
				if (this.searchQuery) {
					const query = this.searchQuery.toLowerCase();
					this.filteredData = this.dataList.filter(item =>
						item.texts.toLowerCase().includes(query)
					);
				} else {
					this.filteredData = this.dataList;
				}
			}
		},
		created() {
			this.filteredData = this.dataList; // 初始化时显示全部数据
		}
	}
</script>

<style>
	.search-Box {
		width: 640rpx;
		border: 1rpx solid #ccc;
		margin-bottom: 20rpx;
		padding: 20rpx;
		border-radius: 15rpx;
	}

	.data-text {
		font-weight: 600;
		font-size: 30rpx
	}

	.data-list {
		width: 640rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx 20rpx;
	}

	.history-container {
		width: 640rpx;
		padding: 10rpx 20rpx;
		margin: 20rpx 20rpx;
		border-bottom: 2rpx solid #ccc;
	}

	.history-container view {
		list-style-type: none;
		padding: 0;
	}

	.History-text {
		display: flex;
	}

	.History {

		cursor: pointer;
		padding: 5px;
		border: 1px solid #ddd;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: #ccc;
		border-radius: 15rpx;
		padding: 40rpx;
	}

	.history-container .History:hover {
		background-color: #f0f0f0;
	}
</style>